MENU


Spacing Offset

You can leave some space to the left of a column by using the 'offset-{n}' class, where n is the width unit in the range of 1 to 12.
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

<div class="container">
   <div class="row">
      <div class="col-4">1A</div>
      <div class="col-4 offset-4">1B</div>
   </div>
   <div class="row">
      <div class="col-3 offset-3">2A</div>
      <div class="col-3 offset-3">2B</div>
   </div>
   <div class="row">
      <div class="col-6 offset-3">3A</div>
   </div>
</div>

</body><html>
Use the g* gutter utility class on a row to adjust the spacing between columns.
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

<div class="container" style="border:1px solid black;">
   <div class="row gx-5">
      <div class="col">
         <div class="border bg-primary">1A</div>
      </div>
      <div class="col">
         <div class="border bg-primary">1B</div>
      </div>
   </div>
   <div class="row gx-1">
      <div class="col">
         <div class="border bg-primary">2A</div>
      </div>
      <div class="col">
         <div class="border bg-primary">2B</div>
      </div>
   </div>
</div>

</body><html>

Add a 'no-gutters' class on a row to indicate that no padding should be present.

You can automatically distribute the space around fixed-width columns too.
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

   <div class="container">
      <div class="row justify-content-start">
         <div class="col-4">1A</div>
         <div class="col-4">1B</div>
      </div>
      <div class="row justify-content-center">
         <div class="col-4">2A</div>
         <div class="col-4">2B</div>
      </div>
      <div class="row justify-content-end">
         <div class="col-4">3A</div>
         <div class="col-4">3B</div>
      </div>
      <div class="row justify-content-around">
         <div class="col-4">4A</div>
         <div class="col-4">4B</div>
      </div>
      <div class="row justify-content-between">
         <div class="col-4">5A</div>
         <div class="col-4">5B</div>
      </div>
   </div>

</body><html>